import React, { useState, useRef,useEffect } from 'react';
import { View } from '@tarojs/components';
import { PullToRefresh, VirtualList, InfiniteScroll, NavBar, Image, Button,Toast } from '@antmjs/vantui';
import Taro,{getMenuButtonBoundingClientRect} from '@tarojs/taro';
import { dailycheckin } from '../../../../https/home';
import { getUserInfo,HOST } from '../../../../utils/const'
import './index.scss'

const Toast_ = Toast.createOnlyToast()

export default function ConinsDetail() {
    const btn = getMenuButtonBoundingClientRect();
    const [data, setData] = useState([]);
    const [count, setCount] = useState(1)
    const virtualListRef = useRef();

    useEffect(()=>{
       
    },[])

    function getRandomColor() {
        let color = "#";
        const characters = "0123456789ABCDEF";
        do {
            for (let i = 0; i < 6; i++) {
                color += characters[Math.floor(Math.random() * 16)];
            }
        } while (color === "#FFFFFF"); // 确保颜色不等于白色
        return `${color}99`; // 在颜色后面添加透明度值，0.6的透明度对应十六进制的99
    }

    const daySign = ()=>{
        Taro.showLoading({ title: '加载中' })
        dailycheckin({userId:getUserInfo()?.user_id}).then((res) => {
            Taro.hideLoading()
            if (res.success) {
               Toast_.show('签到成功')
            }
        })
    }

    return (
        <View className='mycoins-frame-view'>
            <NavBar title='每日签到' leftArrow leftText={'返回'} onClickLeft={() => Taro.navigateBack()} fixed/>
            <View className='header-bg-view' style={{paddingTop:btn.bottom+20}}>
                <View className='img'>
                    <Image src={getUserInfo()?.avatar?HOST+getUserInfo()?.avatar:"https://img.yzcdn.cn/vant/cat.jpeg"} radius={'50%'} width={100} height={100} />
                </View>
                <View className='info-text'>
                    <View>
                        {getUserInfo()?.nickname||''}
                    </View>
                    <View className='header-day-view'>
                        <View className='ranking'>{`连续签到${count}天`}</View>
                        {/* <View className='ranking' style={{ marginLeft: 5 }}>
                            排名3214名
                        </View> */}
                    </View>
                </View>
                {count > 1 ? null : <View className='time-view'>
                    <Button onClick={daySign} type='primary' size='small'>签到</Button>
                </View>}
            </View>
            <View className='line-view'>排行榜</View>
            <PullToRefresh>
                <VirtualList
                    style={{ padding: 10, boxSizing: 'border-box' }}
                    height="calc(100vh - 135px)"
                    dataSource={data}
                    showCount={3}
                    ref={virtualListRef}
                    ItemRender={({ item,index}) => {
                        return (
                            <View className='list-bg-view'>
                                <View className='index-tit' style={{color:getRandomColor()}}>{index+1}</View>
                                <View className='img'>
                                    <Image src='https://img.yzcdn.cn/vant/cat.jpeg' radius={'50%'} width={100} height={100} />
                                </View>
                                <View className='info-text'>
                                    <View>
                                        小星星
                                    </View>
                                    <View className='update-title'>凌晨00:00</View>
                                </View>
                                <View className='time-view'>
                                    <View className='conins-num'>
                                        30天
                                    </View>
                                    <View className='time-title'>
                                        连续
                                    </View>
                                </View>
                            </View>
                        );
                    }}
                />
            </PullToRefresh>
            <Toast_/>
        </View>
    );
}